﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-1.9.1.min.js"></script>
    <link href="../Content/bootstrap.css" rel="stylesheet" />
    <script src="../Scripts/bootstrap.js"></script>
</head>
<body>
    <div class="container">
        <p>../content/audio/海阔天空.mp3</p>
        <button class="btn btn-primary">
            <i class="glyphicon glyphicon-play"></i>
        </button>
    </div>
    <audio id="myAudio"></audio>
    <script>
    var currentFile = '../content/audio/海阔天空.mp3';
    //判断浏览器是否支持audio
    if (!window.HTMLAudioElement) {
        alert('您的浏览器不支持audio标签');
    } else {
        //绑定按钮事件
        $('.btn').click(function () {
            var icon = $(this).find('i');
            var myAudio = document.getElementById('myAudio');
            //播放
            if (myAudio.src.length <= 0) {
                myAudio.src = currentFile;
            }
            if (myAudio.paused) {
                myAudio.play();
                icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
            } else {
                myAudio.pause();
                icon.addClass('glyphicon-play').removeClass('glyphicon-pause');
            }
        });
    }
    </script>
</body>
</html>
